<script lang="ts" setup>
import {loginWithPassword} from '@/api/user'

import Layout from '@/components/Form/Layout.vue'
import XInput from '@/components/Form/XInput.vue'
import XButton from '@/components/Form/XButton.vue'
import XPasswordInput from '@/components/Form/XPasswordInput.vue'

const formData = $ref({
    account: '',
    password: '',
    accept: false
})

const {base, success} = useToast()
const {switchLoginState} = $(useUser())

async function login() {
    const {code, msg, data} = await loginWithPassword({
        phone: formData.account,
        password: formData.password
    })
    if (code !== 0) {
        base(msg || '登录失败！')
    } else {
        success(msg || '登录成功！')
        switchLoginState(data)
    }
}
</script>

<template>
    <Layout v-model="formData.accept" title="密码登录">
        <view mt-10>
            <XInput v-model="formData.account" placeholder="请输入账号（手机号或邮箱）"/>
        </view>
        <view mt-5>
            <XPasswordInput v-model="formData.password"/>
        </view>
        <view my-5>
            <XButton :form-data="formData" @click="login">
                立即登录
            </XButton>
        </view>
        <view between>
            <navigator url="/pages/login/captcha" hover-class="text-blue transition" text="30 #555555">
                忘记密码
            </navigator>
            <navigator text="30 #555555" url="/pages/register/index" hover-class="text-blue transition">
                去注册
            </navigator>
        </view>
    </Layout>
</template>

<style lang="scss" scoped></style>
